<!DOCTYPE html>

<html>

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" type="text/css" href="../Onmyoji/src/footer/footer.css" />
  <link rel="stylesheet" href="css/swiper.min.css">
  <link rel="stylesheet" href="css/animate.min.css">
  <link rel="stylesheet" type="text/css" href="../Onmyoji/src/center/center.css" />
  <link rel="stylesheet" type="text/css" href="../Onmyoji/src/header/header.css" />
  <script type="text/javascript" src="../Onmyoji/js/jquery-3.5.1.js"></script>
  <script type="text/javascript" src="../Onmyoji/js/index.js"></script>
<title>Onmyoji</title>
  <style>
    /* .window{
    height: 500px; ;
    width: 800px;
    overflow:hidden;
  } */
    header a {
      margin-left: 15px;
      margin-top: -15px;
    }

    .aa {
      z-index: 8 !important;
    }

    .move {
      border: 1px solid red;
      outline-style: dotted;
      outline-color: #00ff00;
    }
  </style>
</head>

<body>
  <header>
    <img src="src/header/images/wangyiLogo.png" />
    <a href="http://game.yixin.im/c/register" class="header-link" class="1">注册账号
    </a>
    <a href="#">购卡充值 </a>
    <a href="#">游戏云助手 </a>
    <a href="#">网易游戏全目录 </a>
  </header>
  <div class="windowPop-up">
    <div class="window">
      <img src="src/center/images/windowPop-up/W-bord.png" class="W-bord" />
      <img src="src/center/images/windowPop-up/W-txt.png" class="W-txt" />
      <img src="src/center/images/windowPop-up/W-buttonLeft.png" class="W-buttonLeft" />
      <img src="src/center/images/windowPop-up/W-buttonRight.png" class="W-buttonRight" />
      <img src="src/center/images/windowPop-up/W-close.png" class="W-buttonClose" />
    </div>
  </div>
  <main>
    <img src="src/center/images/p1/SLOGAN.png" class="p1-Slogo" />
    <img src="src/center/images/p1/part-overflow.png" class="partLeft" />
    <img src="src/center/images/p1/part.png" class="partRight" />
    <a href="http://game.163.com/">
      <img src="src/center/images/p1/EnterOfficialWebsite.png" class="Enter" />
    </a>
    <img src="src/center/images/p1/download.png" class="download" />



    <div class="p2">
      <img src="src/center/images/p2/p2-tiltle.png" class="p2-tiltle" />
      <img src="src/center/images/p2/01.png" class="p2-01" />
      <img src="src/center/images/p2/02.png" class="p2-02" />
      <img src="src/center/images/p2/03.png" class="p2-03" />
      <img src="src/center/images/p2/04.png" class="p2-04" />
      <img src="src/center/images/p2/05.png" class="p2-05" />
      <img src="src/center/images/p2/06.png" class="p2-06" />
      <img src="src/center/images/p2/07.png" class="p2-07" />
      <img src="src/center/images/p2/08.png" class="p2-08" />
    </div>


    <img src="src/center/images/bird/bird01.png" class="bird01" />
    <!-- <img src="src/center/images/bird/bird02.png" class="bird02" />
        <img src="src/center/images/bird/bird03.png" class="bird03" />
        <img src="src/center/images/bird/bird04.png" class="bird04" />
        <img src="src/center/images/bird/bird05.png" class="bird05" />
        <img src="src/center/images/bird/bird06.png" class="bird06" />
        <img src="src/center/images/bird/bird07.png" class="bird07" /> -->


    <div class="p3">
      <img src="src/center/images/p3/p3-tiltle.png" class="p3-tiltle" />
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide"><img src="src/center/images/p3/p3-01.jpg" /></div>
          <div class="swiper-slide"><img src="src/center/images/p3/p3-02.jpg" /></div>
          <div class="swiper-slide"><img src="src/center/images/p3/p3-03.jpg" /></div>
        </div>



      </div>
      <!-- <div class="swiper-pagination"></div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div> -->
    </div>



    <div class="p4">
      <img src="src/center/images/p4/p4-tiltle.png" class="p4-tiltle" />
      <img src="src/center/images/p4/p4-BG.png" class="p4-BG" />
      <img src="src/center/images/p4/p4-main.png" class="p4-main" />
    </div>

    <div class="p1-BGp2">
    </div>
  </main>
  <footer>
    <a class="a1">公司简介 -</a>
    <a class="a2">客户服务 -</a>
    <a href="www.baidu.com" class="a3">相关法律 -</a>
    <a class="a4">网易游戏 -</a>
    <a href="#" class="a5">联系我们 -</a>
    <a href="#" class="a6">商务合作 -</a>
    <a href="#" class="a7">加入我们 </a>

    <p>网易公司版权所有@1997-2012</p>
    <a class="a8" href="https://www.ccopyright.com.cn/index.php?optionid=1634">中国网络游戏版权保护中心</a>
  </footer>

  <script src="js/swiper.min.js"></script>
  <script src="js/swiper.animate.min.js"></script>
  <script type="text/javascript">
    // (function (doc, win) {
    //   var docEl = doc.documentElement,
    //     /* 声明一个变量等于一个HTML元素 */
    //     resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    //     /* resize用户可调节元素大小-orientationchange屏幕翻转时 */
    //     /* 在用户翻转设备时 ，调整元素大小*/
    //     recalc = function () {
    //       var clientWidth = docEl.clientWidth;
    //       if (!clientWidth) return;
    //       docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
    //     };

    //   if (!doc.addEventListener) return;
    //   win.addEventListener(resizeEvt, recalc, false); /* 添加文档点击事件 */
    //   doc.addEventListener('DOMContentLoaded', recalc, false);
    // })(document, window); /*  */

    var mySwiper = new Swiper('.swiper-container', {

      autoplay: true,
      slidesPerView: 'auto', //预浏览为
      loop: true,
      loopedSlides: 3,
      effect: 'coverflow',
      slidesPerView: 3,
      centeredSlides: true,
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      on: {
        init: function () {
          swiperAnimateCache(this); //隐藏动画元素 
          this.emit('slideChangeTransitionEnd'); //在初始化时触发一次slideChangeTransitionEnd事件
        },
        slideChangeTransitionEnd: function () {
          swiperAnimate(this); //每个slide切换结束时运行当前slide动画
          this.slides.eq(this.activeIndex).find('.ani').removeClass('ani'); //动画只展示一次
        }
      }
    });
  </script>
</body>

</html>